<script setup>
import {defineProps,ref,watch,onMounted} from "vue";
import UserViewFavorites from "@/views/UserView/Components/UserViewFavorites.vue";
import VideoCard from "@/views/index/components/VideoCard.vue";
import {favoriteApi} from "@/apis/favoriteApi.js";
import {useRoute} from "vue-router";
import HorizonVideoCard from "@/components/horizonVideoCard/horizonVideoCard.vue";
import User from "@/utils/User/User.js";
const props = defineProps({
  modelValue:{
    type:Boolean,
    required:true,
  }
})
const emit = defineEmits(['update:modelValue']);
// 更新值的方法
const updateValue = (flag) => {
  emit('update:modelValue', flag);
};
watch(()=>props.modelValue, async ()=>{
  console.log('watch:modelValue', props.modelValue);
  if(props.modelValue){
    await fetchFavorites();
    selectedFavorite.value=favorites.value[0];
  }
});

const route = useRoute();

const params = route.params;

const fav_index = ref('1');
const favorites = ref([]);
const selectedFavorite = ref(favorites.value[0]);

const fetchFavorites = async () => {
  const favoritesRes = await favoriteApi.getCategoryList(localStorage.getItem('fan_video_userid'))
  const fetchFavoritesPromises = favoritesRes.map(async favorite => {
    const res = await fetchFavoriteVideos(favorite)
    return {
      ...res.data,
      name: favorite,
    }
  })
  const result = await Promise.all(fetchFavoritesPromises)
  console.log("result",result)
  favorites.value = result;
}

const fetchFavoriteVideos = async (cname) => {
  const res = await favoriteApi.getFavoriteVideos(localStorage.getItem('fan_video_userid'),cname)
  console.log('收藏夹视频',cname,res);
  return res;
}

// 控制收藏夹

function selectFavorite(key, keyPath) {
  fav_index.value = `${key}`
  selectedFavorite.value = favorites.value[key]
  console.log(selectedFavorite.value)
}
onMounted( async ()=>{
  await fetchFavorites();
  selectedFavorite.value = favorites.value[0];
});
</script>

<template>
<div class="favorites-dropdown" :class="{ 'dropdown-visible': props.modelValue}"
  @mouseenter="updateValue(true)"
  @mouseleave="updateValue(false)"
>
  <div class="main-container">

    <div class="sidebar">
      <div class="sidebar-favorites">
        <el-menu
            :default-active="fav_index"
            class="el-menu-demo"
            mode="vertical"
            @select="selectFavorite"
            :ellipsis="false"
        >
          <div v-for="(favorite, idx) in favorites" :key="idx" class="favorite-item">
            <el-menu-item class="favorite-name" :index="idx">{{ favorite.name }}</el-menu-item>
          </div>
        </el-menu>
      </div>
    </div>

    <div class="video-area">
      <div v-if="selectedFavorite">
        <div class="video-grid">
          <horizon-video-card v-for="(video, idx) in selectedFavorite.videos" :key="idx" :video="video"
            @click="updateValue(false)"
          />
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<style scoped lang="less">
.favorites-dropdown{
  position: absolute;
  top: calc(100% + 10px) ;
  right: -140px;
  width: 480px;
  height: 600px;
  background-color: #fff;
  //left: -4px;  // 对齐外层padding
  //right: -4px; // 对齐外层padding
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
  z-index: 1000;
  //margin-top: -1px; // 消除边框间隙
  overflow: hidden;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;

  .main-container {
    display: flex;
    height: 100%;
    //height: 100vh;

    .sidebar {
      width: 150px;
      max-width: 300px;
      height: 100%;
      background-color: white;
      padding: 4px;
      overflow-y: auto;

      .sidebar-favorites {

        .favorite-item {
          margin-bottom: 0;
          border-radius: 5px;
          overflow: hidden;
          //box-shadow: 1px 0 0 0 #409EFF;
          text-align: center;


          .favorite-name {
            font-size: 12px !important;
            font-weight: 600;
          }
          .el-menu-item.is-active {
            color: #409EFF;
            background-color: #D5ECFE;
          }
        }
      }
    }

    .video-area {
      height: 100%;
      margin-left: 8px;
      margin-top: 10px;
      overflow-y: auto;
      flex:1;

      .video-grid {
        width: 100%;
        height: 80px;

        & > *{
          margin-top: 5px;
        }
      }
    }
  }
}
.dropdown-visible{
  visibility: visible;
  opacity: 100;
}
</style>
